<template>
		<view style="width: 100%;height: 100%;">
			<swiper v-if="mode==='default'" class="myswiper"  :style="{background:background}"
			@change="change" @transition="transition"
			:indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item 
					@click="handleClick($event,index)"
					class="swiper-item"
					v-for="(item, index) in list"
					:key="index"
				>
					<image  class="swiper-img" :mode="imgMode"  :src="item"  />
				</swiper-item>
			</swiper>
			<swiper v-if="mode==='card'" class="myswiper" @change="change" @transition="transition"
			:next-margin="`${nextMargin}px`"
			:previous-margin="`${preMarigin}px`"
			:circular="circular"
			:indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item 
					@click="handleClick($event,index)"
					class="swiper-item"
					v-for="(item, index) in list"
					:key="index"
				>
					<image :mode="imgMode" :style="{transform:index===activeIndex?'scale(1)':'scale(.8)'}" class="swiper-img" :src="item"  />
				</swiper-item>
			</swiper>
		</view>
</template>

<script>
	export default{
		props:{
			list:{
				type:Array,
				default:()=>{
					return [1,2,3]
				}
			},
			preView:{type:Boolean,default:false},
			mode:{},
			imgMode:{},
			background:{default:'#fff'},
			mode:{default:'default'},
			autoplay:{type:Boolean,default:false},
			indicatorDots:{type:Boolean,default:false},
			interval:{type:Number,default:3000},
			duration:{type:Number,default:1000},
			displayMultipleItems:{type:Boolean,default:true},
			circular:{type:Boolean,default:true},
			preMarigin:{default:50},
			nextMargin:{default:50},
			
		},
		data(){
			return{
				activeIndex:0
			}
		},
		methods:{
			handleClick($event,index){
				this.$emit('click',{$event,index})
				this.preView?this.preViewImg(index):''
			},
			preViewImg(e){
				uni.previewImage({
					urls:this.list,
					current:e
				});
			},
			change(e){
				// console.log(e);
				this.activeIndex = e.detail.current
				this.$emit('change',e)
			},
			transition(e){
				// console.log(e);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.myswiper{
		width: 100%;
		height: 100%;
		.swiper-item{
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.swiper-img{
		    width: 100%;
			height: 100%;
			transition: all 1s;
		}
	}
</style>
